var E = Object.defineProperty;
var S = (e, t, l) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
var x = (e, t, l) => (S(e, typeof t != "symbol" ? t + "" : t, l), l);
import { defineComponent as v, toRefs as C, ref as r, withDirectives as W, createVNode as i, resolveComponent as b, resolveDirective as X, createTextVNode as z, reactive as B, render as k } from "vue";
const I = (e) => {
  var l, a, o, s;
  const t = document.getElementsByTagName("div")[0];
  t == null || t.classList.add("theme--light"), $((l = e.themes) == null ? void 0 : l.light), (((a = e.themes) == null ? void 0 : a.dark) == !0 || ((o = e.themes) == null ? void 0 : o.dark).dark == !0) && (t.classList.remove("theme--light"), t == null || t.classList.add("theme--dark"), $((s = e.themes) == null ? void 0 : s.dark));
}, $ = (e) => {
  Object.keys(e).forEach((t) => {
    document.getElementsByTagName("body")[0].style.setProperty(`--${t}`, e[t]);
  });
};
const h = /* @__PURE__ */ v({
  name: "CButton",
  props: {
    type: {
      type: String,
      default: "default"
    },
    ripple: {
      type: String,
      default: "227,242,253,.3"
    },
    rounded: {
      type: Boolean,
      default: !1
    },
    startIcon: {
      type: String,
      default: ""
    },
    endIcon: {
      type: String,
      default: ""
    },
    text: {
      type: Boolean,
      default: !1
    }
  },
  setup(e, {
    slots: t
  }) {
    const {
      type: l,
      ripple: a,
      rounded: o,
      startIcon: s,
      endIcon: d,
      text: y
    } = C(e), c = r(a.value), u = r("none");
    return c.value = l.value == "default" ? "0,0,0,.3" : c.value, u.value = typeof t.default == "function" ? u.value : "64px", () => W(i("div", {
      accesskey: c.value,
      style: {
        minWidth: u.value
      },
      class: ["c-button", "c-button-" + l.value, {
        "c-button-circle": o.value,
        "c-button-text": y.value
      }]
    }, [s.value ? i(b("c-icon"), {
      size: "18",
      icon: s.value
    }, null) : i("span", {
      style: "display:none"
    }, null), i("span", null, [t.default && t.default()]), d.value ? i(b("c-icon"), {
      size: "18",
      icon: d.value
    }, null) : i("span", {
      style: "display:none"
    }, null)]), [[X("ripple"), c.value]]);
  }
});
h.install = (e) => {
  e.component(h.name, h);
};
const f = /* @__PURE__ */ v({
  name: "CApp",
  setup(e, {
    slots: t
  }) {
    return () => i("div", {
      id: "CainUiApp"
    }, [t.default && t.default()]);
  }
});
f.install = (e) => {
  e.component(f.name, f);
};
const m = /* @__PURE__ */ v({
  name: "CIcon",
  props: {
    size: {
      type: String,
      default: "24"
    },
    icon: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    const {
      size: t,
      icon: l
    } = C(e);
    return () => i("i", {
      class: ["mdi", l.value, "c-font"],
      style: {
        "font-size": t.value + "px",
        height: t.value + "px",
        "line-height": t.value + "px"
      },
      "aria-hidden": "true"
    }, [z(" ")]);
  }
});
m.install = (e) => {
  e.component(m.name, m);
};
const R = /* @__PURE__ */ v({
  name: "CRipple",
  props: ["top", "left", "width", "height", "opacity", "scale", "color"],
  setup(e, {
    emit: t
  }) {
    const {
      left: l,
      top: a,
      width: o,
      height: s,
      opacity: d,
      scale: y,
      color: c
    } = C(e), u = r(y.value), g = r(d.value), T = r();
    return setTimeout(() => {
      u.value = 1, g.value = 0.3;
    }, 10), setTimeout(() => {
      g.value = 0;
    }, 300), setTimeout(() => {
      t("destroy");
    }, 400), () => i("span", {
      class: "c-ripple",
      ref: T.value,
      style: {
        left: l.value + "px",
        top: a.value + "px",
        width: o.value + "px",
        height: s.value + "px",
        opacity: g.value,
        backgroundColor: `rgba(${c.value[0]},${c.value[1]},${c.value[2]},${c.value[3]})`,
        transform: `translate(-50%, -50%) scale(${u.value})`
      }
    }, null);
  }
});
const n = B({
  left: "",
  top: "",
  width: 64,
  height: 64,
  opacity: 1,
  scale: 0.6,
  color: [0, 0, 0, 0.3]
}), L = (e, t) => {
  const l = e.offsetWidth / 2;
  e.onmousedown = (a) => {
    n.left = a.layerX, n.top = a.layerY, l >= a.layerX ? (n.width = (e.offsetWidth - a.layerX) * 2.3, n.height = (e.offsetWidth - a.layerX) * 2.3) : (n.width = a.layerX * 2.3, n.height = a.layerX * 2.3), n.scale != 0 && (n.scale -= 0.1), n.color = e.getAttribute("accesskey").split(",");
    const o = document.createElement("span"), s = i(R, n);
    s.props.onDestroy = () => {
      n.scale != 0.6 && (n.scale += 0.1), k(null, o);
    }, k(s, o), e.appendChild(o.firstElementChild);
  }, e.onmouseup = (a) => {
  };
}, N = [h, f, m], U = (e, t) => {
  N.forEach((l) => {
    e.component(l.name, l);
  }), e.directive("ripple", {
    mounted(l, a) {
      L(l, a.value.split(","));
    }
  }), t.theme && I({ ...t.theme });
};
class p {
}
x(p, "install", U);
const A = p.install;
let w = {};
p.install = (e, t) => {
  A.call(p, e, {
    ...w,
    ...t
  });
};
const F = (e) => (w = e, p);
export {
  F as createCainUi,
  F as default
};
